<template>
  <section
    class="relative h-[666px] sm:h-[806px] bg-gray-lightest box-content pb-80 sm:pb-40 lg:pb-0"
  >
    <div class="absolute h-full w-full">
      <img
        class="object-cover h-full 2xl:h-auto w-full"
        src="@/assets/img/header.svg"
      />
    </div>
    <div class="mx-auto pt-[100px] relative px-10 lg:px-1 max-w-screen-lg">
      <div class="absolute top-8 left-1/2 -translate-x-1/2 block sm:hidden">
        <img
          class="block h-8 w-auto"
          alt="lucksec"
          src="@/assets/img/brand.png"
        />
      </div>
      <h2 class="text-2xl sm:text-[36px] leading-tight mb-3 font-bold">
        Hyped Streetwear in Authentic Virtual Mystery Boxes
      </h2>
      <h4 class="mb-8 sm:mb-16 text-sm sm:text-base h-4"></h4>
      <div class="grid grid-cols-2 lg:grid-cols-3">
        <div class="col-span-2">
          <div class="bg-white-20 p-4 sm:p-8 max-w-[550px]">
            <h3 class="font-bold text-lg mb-2.5">
              100% Authentic & Provably Fair
            </h3>
            <p class="text-black-70 text-sm leading-6 mb-5">
              All unboxings are 100% fair and protected by our industry-leading
              provably fair technology. All products are purchased through
              StockX or official vendors.
            </p>
            <router-link to="/all-boxes" class="">
              <button
                type="button"
                class="rounded no-underline border flex items-center justify-center shadow text-black-85 border-transparent hover:bg-yellow-light active:shadow-yellow py-2 px-3 sm:px-4 text-xs sm:text-base bg-variants-primary"
              >
                <div>Learn more</div>
                <!---->
              </button>
            </router-link>
          </div>
        </div>
        <div
          class="relative rotate-[10deg] w-[200px] lg:w-[300px] h-[200px] lg:h-[300px] bg-white rounded-lg overflow-hidden mt-10 mx-auto lg:-mt-10 col-span-2 lg:col-span-1"
        >
          <img
            :src="proList[0]?.box_banner_images"
            class="w-full h-full object-cover"
          />
          <div class="absolute top-3 -left-1">
            <span class="bg-[#e63903] py-2 px-4 text-sm text-white rounded"
              >New</span
            >
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  props: ["proList"],
};
</script>

<style></style>
